﻿@inherits Blazorise.FileEdit
<div class="ant-upload ant-upload-select ant-upload-select-text">
    <span tabindex="0" class="ant-upload" role="button">
        <input @ref="@ElementRef" id="@ElementId" type="file" class="@ClassNames" style="@InputStyleNames" disabled="@Disabled" readonly="@ReadOnly" multiple="@Multiple" tabindex="@TabIndex" placeholder="@Placeholder" @onkeydown="@OnKeyDownHandler" @onkeypress="@OnKeyPressHandler" @onkeyup="@OnKeyUpHandler" @onblur="@OnBlurHandler" @onfocus="@OnFocusHandler" @onfocusin="@OnFocusInHandler" @onfocusout="@OnFocusOutHandler" accept="@Filter" @attributes="@Attributes" />
        <button type="button" class="ant-btn" @onclick="@OnButtonClickHandled" disabled="@Disabled">
            <span role="img" aria-label="upload" class="anticon anticon-upload">
                <svg viewBox="64 64 896 896" focusable="false" data-icon="upload" width="1em" height="1em" fill="currentColor" aria-hidden="true"><path d="M400 317.7h73.9V656c0 4.4 3.6 8 8 8h60c4.4 0 8-3.6 8-8V317.7H624c6.7 0 10.4-7.7 6.3-12.9L518.3 163a8 8 0 00-12.6 0l-112 141.7c-4.1 5.3-.4 13 6.3 13zM878 626h-60c-4.4 0-8 3.6-8 8v154H214V634c0-4.4-3.6-8-8-8h-60c-4.4 0-8 3.6-8 8v198c0 17.7 14.3 32 32 32h684c17.7 0 32-14.3 32-32V634c0-4.4-3.6-8-8-8z"></path></svg>
            </span>
            <span>
                @if ( ChildContent == null )
                {
                    @BrowseButtonString
                }
                else
                {
                    @ChildContent
                }
            </span>
        </button>
    </span>
    @if ( !HasSelectedFileNames && Placeholder != null )
    {
        <Span TextColor="TextColor.Muted" Margin="Blazorise.Margin.Is2.FromLeft">
            @Placeholder
        </Span>
    }
</div>
<div class="ant-upload-list ant-upload-list-text">
    @foreach ( var filename in SelectedFileNames )
    {
        <div>
            <span>
                <div class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-text">
                    <div class="ant-upload-list-item-info">
                        <span>
                            <div class="ant-upload-text-icon">
                                <span role="img" aria-label="paper-clip" class="anticon anticon-paper-clip">
                                    <svg viewBox="64 64 896 896" focusable="false" data-icon="paper-clip" width="1em" height="1em" fill="currentColor" aria-hidden="true">
                                        <path d="M779.3 196.6c-94.2-94.2-247.6-94.2-341.7 0l-261 260.8c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l261-260.8c32.4-32.4 75.5-50.2 121.3-50.2s88.9 17.8 121.2 50.2c32.4 32.4 50.2 75.5 50.2 121.2 0 45.8-17.8 88.8-50.2 121.2l-266 265.9-43.1 43.1c-40.3 40.3-105.8 40.3-146.1 0-19.5-19.5-30.2-45.4-30.2-73s10.7-53.5 30.2-73l263.9-263.8c6.7-6.6 15.5-10.3 24.9-10.3h.1c9.4 0 18.1 3.7 24.7 10.3 6.7 6.7 10.3 15.5 10.3 24.9 0 9.3-3.7 18.1-10.3 24.7L372.4 653c-1.7 1.7-2.6 4-2.6 6.4s.9 4.7 2.6 6.4l36.9 36.9a9 9 0 0012.7 0l215.6-215.6c19.9-19.9 30.8-46.3 30.8-74.4s-11-54.6-30.8-74.4c-41.1-41.1-107.9-41-149 0L463 364 224.8 602.1A172.22 172.22 0 00174 724.8c0 46.3 18.1 89.8 50.8 122.5 33.9 33.8 78.3 50.7 122.7 50.7 44.4 0 88.8-16.9 122.6-50.7l309.2-309C824.8 492.7 850 432 850 367.5c.1-64.6-25.1-125.3-70.7-170.9z"></path>
                                    </svg>
                                </span>
                            </div>
                            <span class="ant-upload-list-item-name ant-upload-list-item-name-icon-count-1" title="@filename">@filename</span>
                        </span>
                    </div>
                </div>
            </span>
        </div>
    }
</div>
@Feedback
@code{
    string InputStyleNames
        => $"{StyleNames} display: none;";

    bool HasSelectedFileNames => SelectedFileNames.Any();

    async Task OnButtonClickHandled()
    {
        await JSRunner.OpenFileDialog( ElementRef, ElementId );
    }
}